<template>
	<view class="content">
		<!-- 顶部 -->
		<view class="header">
			<view class="header-content">
				<u-icon name="hourglass-half-fill" space="5px" label="已下单" color="#fff" labelSize="14px" size="44rpx"
					labelColor="#fff"></u-icon>
			</view>

		</view>
		<!-- 订单信息 -->
		<view class="centre">
			<view class="title">
				<text>订单信息</text>
			</view>

			<u-line dashed length="94%" margin="auto"></u-line>

			<u-cell-group :border="border">
				<!-- 回收品类 -->
				<u-cell size="large" title="回收品类" v-if="list.rubbishId == 1" value="纸品" :border="border"></u-cell>
				<u-cell size="large" title="回收品类" v-if="list.rubbishId == 2" value="金属" :border="border"></u-cell>
				<u-cell size="large" title="回收品类" v-if="list.rubbishId == 3" value="塑料" :border="border"></u-cell>
				<u-cell size="large" title="回收品类" v-if="list.rubbishId == 4" value="纺织物" :border="border"></u-cell>
				<u-cell size="large" title="回收品类" v-if="list.rubbishId == 5" value="家电" :border="border"></u-cell>
				<u-cell size="large" title="回收品类" v-if="list.rubbishId == 6" value="其他" :border="border"></u-cell>

				<u-line length="94%" margin="auto"></u-line>

				<!--预估重量  -->

				<u-cell size="large" title="预估重量" :value="list.maxWeight + '-' + list.minWeight + 'Kg'"
					:border=" border"></u-cell>
				<u-line length="94%" margin="auto"></u-line>
			</u-cell-group>

			<!-- 地址 -->
			<view class="address">
				<view class="address-title">
					<view class="icon">
						<u-icon name="map-fill" color="#89DFD7" size="20px"></u-icon>
					</view>
					<view class="name-phone">
						<text class="name">{{list.userName}}</text>
						<text class="phone">{{list.userPhone}} </text>
					</view>

				</view>

				<view class="address-contre">
					{{list.recycleAddress}}
				</view>

			</view>
			<u-line length="94%" margin="auto"></u-line>

			<u-cell-group :border="border">
				<!-- 订单号 -->
				<u-cell size="large" title="订单号" :value="list.id" :border="border"></u-cell>

				<u-line length="94%" margin="auto"></u-line>

				<!--下单时间  -->

				<u-cell size="large" title="下单时间" :value="list.createTime" :border="border"></u-cell>
				<u-line length="94%" margin="auto"></u-line>

			</u-cell-group>

			<!--门店地址  -->
			<view class="store">
				<view class="store-left"> 门店地址 </view>
				<view class="store-right">
					<view class="address-icon">
						<u-icon name="map" color="#89DFD7" size="20px"></u-icon>
					</view>
					<view class="store-address">
						{{list.shopAddress}}
					</view>
				</view>

			</view>

			<u-line length="94%" margin="auto"></u-line>




		</view>
		<!-- 温馨提示 -->
		<view class="tip">
			<view class="tip-title">
				注意事项
				<view class="line">

				</view>
			</view>
			<view class="tip-centre">
				<text class="tip-list">1、服务时间：回收员会第一时间与您确定上门服务时间，请确保手机通畅</text>
				<text class="tip-list">2、订单结算：回收员当场完成服务时，会根据品类、重量当场与您结算</text>
				<text class="tip-list">3、免费赠送订单：回收员在完成订单后将不会支付费用请悉知</text>
				<text class="tip-list">4、重量：小于10kg暂时不能保证上门回收</text>
			</view>
		</view>

		<view class="kong">

		</view>
		<!-- 底部取消订单 -->
		<view class="bottom">
			<view class="button">
				<u-popup :show="show" @close="close" @open="open" mode="center" :closeable="true1"
					:closeOnClickOverlay="false1" round="17px" :overlay="false1">
					<view class="pop">
						<text>提示</text>
						<view class="cancel">
							确定取消订单吗
						</view>

						<view class="pop-button">
							<view class="pop-left">
								<u-button type="primary" text="确定" color="#07C160" @click="confirm"></u-button>
							</view>
							<view class="pop-right">
								<u-button type="primary" text="取消" class="right-button" @click="close"></u-button>
							</view>
						</view>
					</view>
				</u-popup>
				<u-button @click="show = true" type="primary" text="取消订单"></u-button>
			</view>

		</view>
	</view>
</template>

<script>
	import OrderApi from '@/common/FindingService/OrderApi.js';
	export default {
		data() {

			return {
				border: false,
				show: false,
				true1: true,
				false1: false,
				list: '',


			}
		},

		mounted() {




		},
		created() {
			this.PlaceOrder()
		},
		onLoad() {

		},
		methods: {
			PlaceOrder() {

				OrderApi.queryNewOrder().then(res => {
					this.list = res.data.data
					console.log('this.list', this.list)

				})
			},

			confirm() {
				OrderApi.queryCancelOrder(this.list.id).then(res => {

				})

				uni.showToast({
					title: '取消成功',
					duration: 2000
				});
				this.show = false;
				this.timer = setInterval(() => {
					uni.navigateBack();
				}, 1000);

			},
			open() {},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.pop {
		height: 400rpx;
		width: 550rpx;
		box-shadow: -7rpx 7rpx 22rpx #c5c6c9, 7rpx -7rpx 22rpx #ffffff;
		border-radius: 17rpx;

		text {
			display: block;
			margin-top: 30rpx;
			margin-left: 30rpx;
			font-size: 17px;
		}

		.cancel {
			text-align: center;
			margin-top: 100rpx;
			font-size: 17px;

		}

		.pop-button {
			display: flex;
			justify-content: space-evenly;
			margin-top: 60rpx;

			.pop-left {
				width: 200rpx;
			}

			.pop-right {
				width: 200rpx;

				.right-button {
					color: #07C160;
				}
			}
		}
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999999;
		background-color: #fff;
		height: 120rpx;
		margin: 0;
		display: flex;
		align-items: center;

		.button {

			width: 90%;
			margin: 0 auto;

			button {
				height: 80rpx;
				line-height: 80rpx;
				background-color: #fff;
				border: 1px solid #9999A6;
				border-radius: 40rpx;
				color: #9999A6;

			}
		}

	}

	.kong {
		width: 100%;
		height: 100rpx;
	}

	.tip {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 15px;
		margin-bottom: 40rpx;

		.tip-title {
			padding-top: 30rpx;
			text-align: center;
			font-size: 20px;
			color: #36B7AB;
			font-weight: bold;

			.line {
				width: 90rpx;
				height: 10rpx;
				background-color: #D7F5F2;
				margin: 0 auto;
				border-radius: 5rpx;
			}
		}

		.tip-centre {
			margin: 30rpx;
			font-size: 17px;
			padding-bottom: 30rpx;

			.tip-list {
				display: block;
				margin-bottom: 30rpx;
			}
		}
	}

	.store {
		margin: 30rpx 0;
		display: flex;
		align-items: center;
		font-size: 17px;
		justify-content: space-between;

		.store-left {
			width: 40%;
			margin-left: 33rpx;
		}

		.store-right {
			width: 50%;
			display: flex;

			.store-address {
				margin-left: 10rpx;
				margin-right: 20rpx;
			}
		}
	}

	.address {
		margin-top: 30rpx;

		.address-contre {
			width: 500rpx;
			padding-left: 85rpx;
			font-size: 14px;
			margin-top: 20rpx;
			color: #999999;
			padding-bottom: 30rpx;
		}

		.address-title {
			display: flex;
			padding-left: 30rpx;

			.name-phone {
				margin-left: 20rpx;
				font-weight: bold;
				font-size: 17px;

				.name {
					margin-right: 20rpx;
				}
			}
		}
	}


	.centre {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 15px;
		padding-bottom: 80rpx;

		.title {
			display: flex;
			height: 100rpx;
			align-items: center;

			text {
				display: block;
				padding-left: 35rpx;
				border-left: 5px solid #98E7E5;
				font-size: 17px;
				font-weight: bold;
			}

		}
	}

	.header {
		height: 100rpx;
		background-color: #54C5BB;

		.header-content {
			display: flex;
			margin-left: 50rpx;
			align-content: center;
			height: 100rpx;
		}
	}

	.content {
		background-color: #F1F3F6;
	}
</style>